<template>
  <div class="price_page">
    <!-- 导航 开始 -->
    <nav-bar title="查价格" url="/home"></nav-bar>
    <!-- 导航 end -->

    <div class="price_content">
      <!-- 轮播提示 开始 -->
      <div class="show_tips">
        <div class="msg_list" ref="msgList">
          <van-swipe
            vertical
            class="cell"
            :autoplay="1500"
            :show-indicators="false"
          >
            <van-swipe-item v-for="(item, index) in userList" :key="index"
              >{{ item.cityName }}
              {{ fomartPhone(item.phone) }} 查询报价</van-swipe-item
            >
          </van-swipe>
        </div>
      </div>
      <!-- 轮播提示 end -->

      <!-- 合计数据 开始 -->
      <div class="total_box">已有 68821 人查询了价格</div>
      <!-- 合计数据 end -->

      <!-- 价格展示 开始 -->
      <div class="price_box">
        <div class="input_show">
          <img src="@/assets/images/price.gif" class="img" alt="" />
          <!-- <div class="inner">
                              <span class="name">看牙总价</span>
                              <div class="right">
                                <span>75905</span>
                                <span class="unit">元</span>
                              </div>
                            </div> -->
        </div>

        <!-- 费用明细 开始 -->
        <div class="price_detail">
          <div class="cell">
            <div class="top"><span class="sp">?</span><span>元</span></div>
            <div class="bottom">全包费用</div>
          </div>
          <div class="cell">
            <div class="top"><span class="sp">?</span><span>元</span></div>
            <div class="bottom">医生费用</div>
          </div>
          <div class="cell">
            <div class="top"><span class="sp">?</span><span>元</span></div>
            <div class="bottom">材料费用</div>
          </div>
          <div class="cell">
            <div class="top"><span class="sp">?</span><span>元</span></div>
            <div class="bottom">其它费用</div>
          </div>
        </div>
        <!-- 费用明细 end -->

        <!-- 信息 开始 -->
        <div class="info_form">
          <div class="form_item">
            <div class="form_select" @click="openDialog('cityName')">
              <span :class="form.cityName ? 'form_span' : ''">{{
                form.cityName || "所在城市"
              }}</span>
              <van-icon name="arrow-down" />
            </div>
            <div class="form_select" @click="openDialog('troubleName')">
              <span :class="form.troubleName ? 'form_span' : ''">{{
                form.troubleName || "牙齿情况"
              }}</span>
              <van-icon name="arrow-down" />
            </div>
          </div>
          <div class="form_item">
            <div class="form_select">
              <input
                type="text"
                v-model="form.phone"
                class="a_input"
                placeholder="请输入手机号码"
              />
            </div>
          </div>
        </div>
        <!-- 信息 end -->

        <!-- 按钮 开始 -->
        <div class="btn_group">
          <!-- <button class="btn" @click="saveInfo">立即查询报价</button> -->
          <van-button class="btn" :loading="loading" @click="saveInfo"
            >立即查询报价</van-button
          >
        </div>
        <!-- 按钮 end -->

        <!-- 协议 开始 -->
        <div class="agreement">
          <van-checkbox
            v-model="checked"
            checked-color="#307BFF"
            icon-size="14"
          >
            <div class="label">
              点击按钮视为同意
              <nuxt-link to="/contract/agreement">《服务条款》</nuxt-link>
              <nuxt-link to="/contract/privacy">《隐私协议》</nuxt-link>
              ，且授权邦正口腔通过电话、短信方式提供咨询服务
            </div>
          </van-checkbox>
        </div>
        <!-- 协议 end -->
      </div>
      <!-- 价格展示 end -->

      <!-- 标题 开始 -->
      <div class="head_title">
        <div class="line">
          <span class="sp"></span>
          <span class="sp2"></span>
          <span class="sp3"></span>
        </div>
        <span class="name">为什么看牙先找哩哩报价？</span>
        <div class="line">
          <span class="sp3"></span>
          <span class="sp2"></span>
          <span class="sp"></span>
        </div>
      </div>
      <!-- 标题 end -->

      <!-- 步骤 开始 -->
      <div class="step_box">
        <div class="cell_box">
          <div class="cell">
            <div class="title">步骤简单</div>
            <div class="txt">
              输入您所在的城市和牙齿情况最快30s查询费用、价格
            </div>
          </div>
          <div class="img_box">
            <img src="@/assets/images/inquire/step_01.png" alt="" />
          </div>
        </div>

        <div class="cell_box cell_left">
          <div class="img_box">
            <img src="@/assets/images/inquire/step_02.png" alt="" />
          </div>
          <div class="cell">
            <div class="title">报价靠谱</div>
            <div class="txt">
              曾帮助超过50万人解决牙齿问题依托大数据分析和患者真实反馈，报价准确、详细、透明！
            </div>
          </div>
        </div>

        <div class="cell_box">
          <div class="cell">
            <div class="title">服务贴心</div>
            <div class="txt">专属客服一对一贴心服务随时解决您的看牙困惑！</div>
          </div>
          <div class="img_box">
            <img src="@/assets/images/inquire/step_03.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 步骤 end -->
    </div>

    <!-- 牙齿情况弹框 开始 -->
    <van-popup v-model="showDialog" position="bottom">
      <van-picker
        title="牙齿情况"
        show-toolbar
        :columns="questionList"
        value-key="name"
        @confirm="onConfirm"
        @cancel="closeDialog"
        v-if="pickerId == 'troubleName'"
      />
      <van-picker
        title="所在城市"
        show-toolbar
        :columns="cityJson"
        value-key="name"
        v-if="pickerId == 'cityName'"
        @confirm="onConfirm"
        @cancel="closeDialog"
      />
    </van-popup>
    <!-- 牙齿情况弹框 end -->
  </div>
</template>
<script>
import { NoticeBar, Swipe, SwipeItem, Checkbox, Popup, Picker } from "vant";
import {
  PLATFORM_TYPE,
  GET_QUOTATION_QUERY,
  GET_ORALCAVITY_TROUBLE_OPTIONS,
  GET_QUOTATION_SEARCH,
  GET_SEO_SETTING_INFO
} from "@/http/interface";
import { checkPhone, deepClone, showToast } from "@/utils/utils";
import { TEETH_CONDITION } from "@/utils/constants.js";
import cityJson from "@/assets/json/city.json";
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [NoticeBar.name]: NoticeBar,
    [Checkbox.name]: Checkbox,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
  },
  // watch: {
  //   $route: {
  //     handler: function (n) {
  //       let form = this.$cookies.get("priceInfo");
  //       if (form) {
  //         this.$set(this, "form", form);
  //       }
  //       let query = n.query;
  //       if (query.city) {
  //         this.$set(this.form, "cityName", query.city);
  //         this.$set(this.form, "city", query.code);
  //       }
  //     },
  //     immediate: true,
  //   },
  // },
  data() {
    return {
      checked: true,
      form: {},
      showDialog: false,
      TEETH_CONDITION,
      loading: false,
      questionList: [],
      userList: [],
      pickerId: "troubleName",
      cityJson,
      seoInfo:{}
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/inquire/price`}
      ]
    };
  },
  async asyncData({ $axios }) {
    let res = await $axios.get(GET_ORALCAVITY_TROUBLE_OPTIONS);
    let questionList = res.data || [];

    let ues = await $axios.get(GET_QUOTATION_SEARCH, {
      params: { pageNumber: 1, pageSize: 20 },
    });
    let obj = ues.data || {};
    let userList = obj.list || [];

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 4, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};

    return { questionList, userList,seoInfo };
  },
  created() {},
  methods: {
    // 选择城市
    chooseCity() {
      let query = this.$route.query;
      this.$router.push({
        path: "/city",
        query: query,
      });
    },

    // 保存数据
    async saveInfo() {
      let o = deepClone(this.form);
      if (!o.city) {
        showToast({
          message: "请选择城市",
        });
        return false;
      }
      if (!o.troubleId) {
        showToast({
          message: "请选择牙齿情况",
        });
        return false;
      }
      if (!o.phone) {
        showToast({
          message: "请输入手机号码",
        });
        return false;
      }
      if (!checkPhone(o.phone)) {
        showToast({
          message: "手机号码格式不正确",
        });
        return false;
      }

      if (!this.checked) {
        showToast({
          message: "请阅读并勾选服务条款",
        });
        return false;
      }

      o.platform = PLATFORM_TYPE;
      delete o.troubleName;
      this.loading = true;
      let res = await this.$axios.post(GET_QUOTATION_QUERY, o);
      this.loading = false;
      if (res.code == 200) {
        this.$router.push({
          path: "/inquire/success",
        });
        this.form = {};
      }
    },

    // 打开弹框
    openDialog(id) {
      this.pickerId = id;
      this.showDialog = true;
    },

    // 关闭弹框
    closeDialog() {
      this.showDialog = false;
    },

    // 保存牙齿情况
    onConfirm(e) {
      console.log(e);
      let id = this.pickerId;
      let list = this.cityJson;

      // 牙齿情况
      if (id == "troubleName") {
        this.$set(this.form, "troubleId", e.id);
        this.$set(this.form, "troubleName", e.name);
      }

      // 所在城市
      if (id == "cityName") {
        let o = list.find((k) => k.name == e[0]);
        let c = o.children.find((k) => k.name == e[1]);
        console.log(o);
        console.log(c);
        this.$set(this.form, "cityName", c.name);
        this.$set(this.form, "city", c.code);
      }

      this.closeDialog();
    },

    // 手机号加密
    fomartPhone(str) {
      if (!str) {
        return "";
      }
      let reg = /(\d{3})\d{4}(\d{4})/; //正则表达式
      let phone = str.replace(reg, "$1****$2");
      return phone;
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/inquire/price.less";
</style>